<template>
  <div class="china">
 	<div class="china-banner">
	    <mt-swipe :auto="4000">
		  <mt-swipe-item v-for="obj in banner" :key ="obj.id">
			<img v-bind:src="obj.imgUrl" alt="">
		  </mt-swipe-item>
		</mt-swipe>
		<router-link to="/home">
			<i class="el-icon-arrow-left left"></i>
		</router-link>
		<p class="el-icon-search ss"></p>
	</div>
	<div class="homestay">
		<div class="h-title">
			<h3>民宿</h3>
			<p class="g">更多<i class="el-icon-arrow-right"></i></p>
		</div>
		<div class="h-xq">
			<mt-swipe :auto="0" :show-indicators="false">
				  <mt-swipe-item v-for="obj2 in home" :key ="obj2.id">
				  	<router-link to="/particulars" class="color">
					  	<div class="con" @click="ls(obj2)">
							<img v-bind:src="obj2.coverImg" alt="">
							<h2>{{obj2.title}}</h2>
							<div>
								<p class="fen">{{obj2.avgLevel}}分</p>
								<p class="pu">{{obj2.roomtypeName}}</p>
								<p class="pirce">￥{{obj2.price}}.00起</p>
							</div>
						</div>
					</router-link>
				  </mt-swipe-item>
			</mt-swipe>
		</div>
	</div>

	<div class="homestay">
		<div class="h-title">
			<h3>公寓</h3>
			<p class="g">更多<i class="el-icon-arrow-right"></i></p>
		</div>
		<div class="h-xq">
			<mt-swipe :auto="0" :show-indicators="false">
				  <mt-swipe-item v-for="obj2 in apa" :key ="obj2.id">
				  	<router-link to="/particulars" class="color">
					  	<div class="con"  @click="ls(obj2)">
							<img v-bind:src="obj2.coverImg" alt="">
							<h2>{{obj2.title}}</h2>
							<div>
								<p class="fen">{{obj2.avgLevel}}分</p>
								<p class="pu">{{obj2.roomtypeName}}</p>
								<p class="pirce">￥{{obj2.price}}.00起</p>
							</div>
						</div>
					</router-link>
				  </mt-swipe-item>
			</mt-swipe>
		</div>
	</div>

	<div class="homestay">
		<div class="h-title">
			<h3>客栈</h3>
			<p class="g">更多<i class="el-icon-arrow-right"></i></p>
		</div>
		<div class="h-xq">
			<mt-swipe :auto="0" :show-indicators="false">
				  <mt-swipe-item v-for="obj2 in inn" :key ="obj2.id">
				  	<router-link to="/particulars" class="color">
					  	<div class="con"  @click="ls(obj2)">
							<img v-bind:src="obj2.coverImg" alt="">
							<h2>{{obj2.title}}</h2>
							<div>
								<p class="fen">{{obj2.avgLevel}}分</p>
								<p class="pu">{{obj2.roomtypeName}}</p>
								<p class="pirce">￥{{obj2.price}}.00起</p>
							</div>
						</div>
					</router-link>
				  </mt-swipe-item>
			</mt-swipe>
		</div>
	</div>

	<div class="homestay">
		<div class="h-title">
			<h3>别墅</h3>
			<p class="g">更多<i class="el-icon-arrow-right"></i></p>
		</div>
		<div class="h-xq">
			<mt-swipe :auto="0" :show-indicators="false">
				  <mt-swipe-item v-for="obj2 in villa" :key ="obj2.id">
				  	<router-link to="/particulars" class="color">
					  	<div class="con"  @click="ls(obj2)">
							<img v-bind:src="obj2.coverImg" alt="">
							<h2>{{obj2.title}}</h2>
							<div>
								<p class="fen">{{obj2.avgLevel}}分</p>
								<p class="pu">{{obj2.roomtypeName}}</p>
								<p class="pirce">￥{{obj2.price}}.00起</p>
							</div>
						</div>
					</router-link>
				  </mt-swipe-item>
			</mt-swipe>
		</div>
	</div>
  </div>
</template>

<script>
import arr from '../data/china.json'
//console.log(arr.data)
export default {
  name: 'china',
  data () {
    return {
      banner:arr.data.title,
      city:arr.data.hotCity,
      home:arr.data.homestay,
      apa:arr.data.apartment,
      inn:arr.data.inn,
      villa:arr.data.villa
    }
  },
  methods:{
  	ls(v){
  		localStorage.setItem("name","2");
  		localStorage.setItem("aa","3");
  		eventBus.value = v;
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.china{
	width: 100%;
	background: white;
	padding-bottom: 5px;
	position: relative;
	z-index: 999;
	.china-banner{
		width: 100%;
		height: 250px;
		img{
			width: 100%;
		}
		.left{
			position: absolute;
			top:10px;
			left: 10px;
			color:white;
			font-size: 25px;
		}
		.ss{
			position: absolute;
			right: 10px;
			top:8px;
			font-size: 20px;
			background: green;
			color: white;
			padding: 8px;
			border-radius: 50%;
		}
	}
	.china-city{
		width: 100%;
		overflow: hidden;
		margin-bottom: 20px;
		h3{
			margin-left: 20px;
			font-weight: 500;
		}
		ul{
			width: 9999px;
			li{
				float: left;
				list-style: none;
				text-align: center;
				width: 160px;
			}
		}
	}
	.homestay{
		width: 100%;
		overflow: hidden;
		margin-bottom: 20px;
		.h-title{
			width: 100%;
			height: 30px;
			h3{
				margin-left: 20px;
				font-weight: 500;
				float: left;
			}
			.g{
				float: right;
				line-height: 30px;
				color: #666;
			}
		}
		.h-xq{
			width: 100%;
			height: 350px;
			.color{
				color: black;
				text-decoration: none;
				.con{
					width: 90%;
					margin: 20px auto;
					h2{
						font-size: 18px;
						font-weight: 500;
						margin: 10px 0;
					}
					.fen{
						float: left;
						color: green;
						margin-right: 10px;
					}
					.pu{
						float: left;
					}
					.pirce{
						color: red;
						float: right;
					}
				}
			}
			img{
				width: 100%;
			}
		}
	}
}
</style>
